<template>
<div style="width: 950px;margin-top: -10px;">
        <div style="margin-left: 380px;margin-top: 80px;" class="demo-type">
          <div v-for="(item, index) in RoomUsers" :key="index">
            <div v-if="item.uid === room.accroom.roomInitiator">
              <img :src="item.uphoto" alt="" width="80" height="80" style="border-radius: 50%;"
                :style="{ border: (item.uid === myUser[0].uid ? 'rgb(255, 98, 0) 2px solid' : '#fff 1px solid') }">
              <p style="width: 80px; text-align: center;color: #fff;">{{ item.uName }}</p>
            </div>
          </div>
        </div>
        <div style="width:  800px;margin:auto; display: flex;flex-wrap: wrap;justify-content: center">
          <div v-for="item in RoomUsers" :key="item.uid">
            <div v-if="item.uid !== room.accroom.roomInitiator" style="margin: 25px;">
              <img :src="item.uphoto" :alt="item.uname" width="80" height="80" style="border-radius: 50%;"
                :style="{ border: (item.uid === myUser[0].uid ? 'rgb(255, 98, 0) 2px solid' : '#fff 1px solid') }">
              <p style="width: 80px; text-align: center;color: #fff;">{{ item.uName }}</p>
            </div>
          </div>
        </div>
      </div>
</template>

<script>
import EventBus from '@/util/EventBus'
export default {
  data () {
    return {
      myUser: [JSON.parse(sessionStorage.getItem('user'))],
      room: JSON.parse(this.$route.query.room),
      chat: '',
      message: '你好',
      RoomUsers: []
    }
  },
  methods: {
    CreateRoomUser () {
      if (this.myUser[0].uid != null) {
        const webSocketUrl = 'ws://152.136.143.223:9091/webSocketRoomUser/' + this.room.rid + '/' + this.myUser[0].uname + '/' + this.myUser[0].uid
        this.webSocketObject = new WebSocket(webSocketUrl)
        this.webSocketObject.onopen = this.webSocketOnOpen
        this.webSocketObject.onmessage = this.webSocketOnMessage
        this.webSocketObject.onerror = this.webSocketOnError
        this.webSocketObject.onclose = this.webSocketOnClose
      }
    },
    webSocketOnOpen (e) {
      console.log('与服务端连接打开->', e)
    },
    webSocketOnMessage (e) {
      console.log('->', e)
      const receiveMessage = JSON.parse(e.data)
      this.RoomUsers = receiveMessage
      EventBus.$emit('getUsers', this.RoomUsers)
    },
    webSocketOnError (e) {
      console.log('与服务端连接异常->', e)
    },
    webSocketOnClose (e) {
      console.log('与服务端连接关闭->', e)
    }
  },
  beforeMount () {
    this.CreateRoomUser()
  },
  mounted () {
    EventBus.$on('setRoomUsers', (RoomUsers) => {
      this.RoomUsers = RoomUsers
    })
  }

}
</script>

<style>

</style>
